// 对手
import React from 'react'
import QueueAnim from 'rc-queue-anim'
import PubSub from 'pubsub-js/src/pubsub'
import {message} from 'antd'
import config from './../libs/config.js'

import '../styles/opponent.scss'

export default class opponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            datas: []
        }
    }

    componentDidMount() {
        var t = this;
        PubSub.publish('updateMenu','back')
        PubSub.publish('updateTitle','我的对手')
        t.setState({
            objAccount: JSON.parse(window.localStorage['account'])
        },function() {
            var hide = message.loading('加载中...',0)
            $.ajax({
                url: config.server_host + '/api/opponents',
                type: 'get',
                data: {
                    mobile: t.state.objAccount.user,
                    platform: t.state.objAccount.platform
                },
                success: function(data) {
                    if (data.code === 200) {
                        console.log(data)
                        t.setState({
                            datas: data.data
                        })
                    }
                    hide()
                }
            })
        })
    }

    render() {
        var t = this;
        return (
            <QueueAnim
            type={['bottom', 'top']}
            ease={['easeOutQuart', 'easeInOutQuart']}>
                <div className="ani-box" key="a">
                    <div className="flex flex-1 pkl-opponent">
                        <div className="line">
                            <span>名称</span>
                            <span>胜率</span>
                            <span>败率</span>
                            <span>入池率</span>
                        </div>
                        {
                            t.state.datas.map(function(i){
                                return (
                                    <div className="line">
                                        <span>{i.name}</span>
                                        <span>{(i.winrate * 100).toFixed(2)}%</span>
                                        <span>{(i.loserate * 100).toFixed(2)}%</span>

                                        <span>{(i.inportrate*100).toFixed(2)}%</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </QueueAnim>
        )
    }
}
